<template id="Release">
    <div class="try_m">
        <div class="Release_top">
            <img src="../image/blue_da.png" alt="" @click="get_back()">
            <h4>发布动态</h4>
        </div>
        <div class="Release_text">
            <div class="Release_idea_center">
                <textarea name="" id="Release_feedback" cols="30" rows="10" class="Release_idea_t" placeholder="请写下你的建议或意见">

                </textarea>
               <!-- <span>{{remnant}}/<time>200</time></span>-->
            </div>
        </div>
        <ul class="Release_4_5 showimg" id="item_img">
            <li v-for="(img,index) in item_img">
                <img v-bind:src="img" alt="" >
                <img src="../image/del_g.png"   @click="get_del(index)" alt="">
            </li>

           
            <li>
                <img   src="../image/input.png" alt="">
                <input type="file" class="files"  @change="getFile($event)">
                <input type="hidden" v-model="source" >
            </li>
        </ul>
        <!--底部浮动-->
        <p class="try_float1" @click="trial_trial()">发布动态</p>
        <!--取消商品动态-->
        <div class="model_y" v-if="model_show">
            <h3>提示</h3>
            <p>你是否要取消发布动态</p>
            <p><span @click="get_all()">取消</span><span @click="get_g()">删除</span></p>
        </div>
        <!--删除商品-->
        <div class="model_y" v-if="model_show_1">
            <h3>提示</h3>
            <p>你确定要删除该照片</p>
            <p><span @click="get_all()">取消</span><span @click="del()">删除</span></p>
        </div>
        <!--背景-->
        <!--背景弹窗-->
        <div class="back_bg" v-if="bg_backgrond" @click="get_all()"></div>
    </div>
</template>
<script>
    export default{
        name: 'Release',
        data() {
            return {
               /* remnant:200,
                desc:'',*/
                //背景
                bg_backgrond:false,
                //未收到验证码
                model_show:false,
                model_show_1:false,
                source:'center',
                order_id:this.$route.query.order_id,
                item_img:[],
                del_id:'',
            }
        },
        mounted:function () {
            let H=$(window).height();
            $('.try_m').height(H);

        },
        methods:{
         /*   descInput(){
                var txtVal = this.desc.length;
                this.remnant = 200 - txtVal;
            },*/
            get_back(){
                 window.history.go(-1);
            },
            get_qu:function(){
                this.model_show=true;
                this.bg_backgrond=true;
            },
            get_all:function(){
                this.model_show=false;
                this.bg_backgrond=false;
                this.model_show_1=false;
            },
            get_g:function(){
                window.history.go(-1);
            },
            get_del:function(index){
                this.item_img.splice(index, 1);   
                return;
                this.del_id = index;
                this.model_show_1=true;
                this.bg_backgrond=true;
            },
            del:function(){
                console.log(this.del_id);
                this.item_img.splice(this.del_id, 1);   
                
            },
            getFile(event) {
                this.file = event.target.files[0];
                
                let form = {"image":this.file,"source":this.source}             
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

                this.$ajax.post(url, Data).then((res) => {
                    if(res.data.code == 200){
                        this.item_img.push(res.data.data);
                    }else{
                        alert(res.data.msg);        
                    }       
                }).catch((err) => {
                    console.log(err);
                })
            },
            trial_trial(){
                let content = $("#Release_feedback").val();
                if(!content){
                    alert("评论不能为空！")
                }

                let data = [];

                data['c']        = 'Comment';
                data['m']        = 'trial_comment';
                data['order_id'] = this.order_id;
                data['content']  = content;
                data['shopimg']  = JSON.stringify(this.item_img);

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(data);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert("评论成功!");
                        window.history.go(-1);
                    }else{
                        this.GLOBAL.center_error(this,temp);   
                    }  
                })     
            }
        },

    };

</script>
<style>
     .showimg{
         position: relative;
         width:1.11rem;
         height: 1.09rem;
         display:block;
        }
    .showimg .files {
        position: absolute;
        font-family: Arial;
        width: 1.3rem;
        height: 1.3rem;
        cursor: pointer;
        background-color: #999999;
        opacity: 0;
        z-index: 3;
        top: 0px;
        }   
    .back_bg{
        height:100%;
        width:1000%;
        background:#000000;
        opacity:0.5;
        position: fixed;
        top:0;
        left:0;
        z-index:1;
    }
    /*背景弹窗*/
    .model_y p:nth-of-type(2) span{
        flex:1;
        color:#0870d7;
        font-size:0.28rem;
        height:0.7rem;
        line-height:0.7rem;
        text-align:center;
    }
    .model_y p:nth-of-type(2) span:nth-of-type(1){
        border-right:0.01rem solid #d9d4cc;
    }
    .model_y p:nth-of-type(2){
        height:0.7rem;
        width:4.62rem;
        border-top:0.01rem solid #d9d4cc;
        display:flex;
    }
    .model_y p:nth-of-type(1){
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        margin-bottom: 0.25rem
    }
    .model_y h3{
        width:4.62rem;
        height:0.56rem;
        text-align:center;
        line-height:0.56rem;
        font-size:0.24rem;
        color:#000000;
        font-weight:normal;
    }
    .model_y{
        height:1.82rem;
        width:4.62rem;
        background:#ffffff;
        border-radius:0.1rem;
        position:fixed;
        top: 38%;
        left: 14%;
        z-index:2;
    }
    /*背景弹窗*/
    .Release_4_5 li:last-of-type img:nth-of-type(1){
        border:0;
    }
    .Release_4_5 li img:nth-of-type(1){
        display:block;
        height:1.28rem;
        width:1.29rem;
        border:0.01rem solid red;

    }
    .Release_4_5 li img:nth-of-type(2){
        display:block;
        height:0.24rem;
        width:0.24rem;
        position:absolute;
        top:0.1rem;
        right:0.1rem;
    }
    .Release_4_5 li{
        list-style:none;
        height:1.3rem;
        width:1.3rem;
        border-radius:0.05rem;
        margin-right:0.1rem;
        margin-bottom:0.1rem;
        position:relative;
    }
    .Release_4_5{
        min-height:1.56rem;
        width:5.74rem;
        padding-top:0.2rem;
        display:flex;
        padding-left:0.26rem;
        flex-wrap:wrap;

    }
    /*3*/
   /* .Release_idea_center span{
        position:absolute;
        color:#bcbcbc;
        font-size:0.24rem;
        left:5rem;
        top:2rem;
    }*/
    .Release_idea_t{
        width:5.9rem;
        height:2.42rem;
        border:0;
        outline:none;
        background:#ffffff;
        line-height:0.28rem;
    }
    .Release_idea_center{
        width:5.9rem;
        height:2.42rem;
        margin:0.22rem 0.28rem;
        position:relative;

    }
    .Release_text{
        width:100%;
        height:2.42rem;
    }
    /*2*/
    .try_float1{
        height:1rem;
        width:100%;
        line-height:1rem;
        text-align:center;
        color:#ffffff;
        font-size:0.3rem;
        position:fixed;
        bottom:0;
        left:0;
        background: -webkit-linear-gradient(left, #7cceff , #2fb0fc); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #7cceff, #2fb0fc); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right,  #7cceff, #2fb0fc); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #7cceff, #2fb0fc); /* 标准的语法（必须放在最后） */
    }
    /*1*/
    /*试吃商品列表*/
    .Release_top{
        height:0.75rem;
        width:100%;
        /* border-bottom:1px solid #f0f0f0;*/
        position:relative;
        background:#ffffff;
    }
    .Release_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .Release_top h4{
        height:0.75rem;
        color:#2eaffc;
        font-size:0.3rem;
        line-height:0.74rem;
        text-align:center;
        font-weight:normal;
    }
</style>
